/** * Create by mzq * Description: MyDiaLog * Date: 2025/2/11 08:42 * Update:
2025/2/11 08:42 */

<template>
  <transition name="fade">
    <div v-if="visible" class="dialog-wrapper" :style="{ zIndex: computedZIndex }">
      <!-- 弹框内容过渡 -->
      <transition name="scale">
        <div class="dialog-content" :style="{ width: dialogWidth, zIndex: computedZIndex + 1 }">
          <div class="header">
            <div class="title">{{titleName}}</div>
            <!-- 添加标题 -->
            <div class="close-btn" @click="handleClose">×</div>
          </div>
          <slot></slot>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'MyDiaLog',
  props: {
    // 控制弹框显示隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: '',
    },
    width: {
      type: [String, Number],
      default: '400px'
    },
    zIndex: {
      type: [String, Number],
      default: 999
    }
  },
  computed: {
    dialogWidth() {
      if (typeof this.width === 'number') {
        return this.width + 'px'
      }
      return this.width
    },
    computedZIndex() {
      return typeof this.zIndex === 'number' ? this.zIndex : parseInt(this.zIndex) || 999
    }
  },
  methods: {
    // 关闭按钮
    handleClose() {
      // 通知父组件关闭弹框
      this.$emit('close')
    },
  },
}
</script>
<style scoped lang="scss">
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;

  .dialog-content {
    position: relative;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 5px 10px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    transform: translateY(-30px);
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #a1a2a3;

    .title {
      padding-left: 10px;
      font-size: 20px;
      color: #a1a2a3;
    }

    .close-btn {
      font-size: 34px;
      cursor: pointer;
      color: #a1a2a3;
      transition: color 0.3s;
      padding-right: 10px;

      &:hover {
        color: #666;
      }
    }
  }
}

/* 遮罩层淡入淡出 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 弹框缩放动画 */
.scale-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-leave-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.95);
}
</style>